<html>
  <lnks_app
    hidechrome="true"
    width="300"
    height="300"
    name="CircleClock"
    title="圆形时钟"
  ></lnks_app>

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
  </head>

  <script>
  </script>

  <style>
  *{
    padding：0；
    margin：0；
  }
  html, body {
    height: 100%;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
  }
  #warp{
    width:230px;
    height:230px;
    margin:50px auto;
  }
  #clock{
    width:200px;
    height:200px;
    border-radius:115px;
    border:15px solid #f96;
    background:white;
    position:relative;
  }
  #number div {
    width: 190px;
    height: 20px;
    position: absolute;
    left: 10px;
    top: 90px;
  }
  #number span {
    display: block;
    width: 20px;
    height: 20px;
  }
  .pointer {
    position: absolute;
    bottom: 90px;
    transform-origin: 50% 90%;
  }
  #houre {
    width: 5px;
    height: 60px;
    left: 98px;
    background: black;
  }
  #minute {
    width: 3px;
    height: 70px;
    left: 99px;
    background: gray;
  }
  #second {
    width: 1px;
    height: 80px;
    left: 100px;
    background: red;
  }
  </style>

  <body>
    <div id="warp" >
      <div id="clock" >
        <div id="number">
          <div><span>9</span></div>
          <div><span>10</span></div>
          <div><span>11</span></div>
          <div><span>12</span></div>
          <div><span>1</span></div>
          <div><span>2</span></div>
          <div><span>3</span></div>
          <div><span>4</span></div>
          <div><span>5</span></div>
          <div><span>6</span></div>
          <div><span>7</span></div>
          <div><span>8</span></div>
        </div>
        <div id="houre" class="pointer" ></div>
        <div id="minute" class="pointer" ></div>
        <div id="second" class="pointer" ></div>
      </div>
    </div>
  </body>

  <script>
  const numberDivs = document.querySelectorAll('#number div');
  const numberSpans = document.querySelectorAll('#number span');

  // 布置钟盘
  for (let i = 0; i < numberDivs.length; i++) {
    numberDivs[i].style.transform = `rotate(${i * 30}deg)`;
  }
  // 纠正文字旋转偏移
  for (let j = 0; j < numberSpans.length; j++) {
    numberSpans[j].style.transform = `rotate(${j * -30}deg)`;
  }

  // 渲染时钟
  function render() {
    const oHoure = document.querySelector('#houre');
    const oMinute = document.querySelector('#minute');
    const oSecond = document.querySelector('#second');

    const nowTime = new Date();
    const nowHoure = nowTime.getHours();
    const nowMinute = nowTime.getMinutes();
    const nowSecond = nowTime.getSeconds();

    // 计算旋转度数
    const hourDeg =
      nowHoure * 30 +
      nowMinute * (360 / 12 / 60) +
      nowSecond * (360 / 12 / 60 / 60);
    const minuteDeg = nowMinute * (360 / 60) + nowSecond * (360 / 60 / 60);
    const secondDeg = nowSecond * (360 / 60);

    oHoure.style.transform = `rotate(${hourDeg}deg)`;
    oMinute.style.transform = `rotate(${minuteDeg}deg)`;
    oSecond.style.transform = `rotate(${secondDeg}deg)`;
  }

  render();

  // 每隔1s进行一次渲染
  setInterval(render, 1000);
  </script>

</html>
